@import "./common";

body {
    padding: vw(170) vw(80) vw(127);

    .container {
        // overflow        : hidden;
        width           : 100%;
        height          : 100%;
        margin          : 0 auto;
        background-color: rgba(247, 251, 254, 0.4);
        box-shadow      : 0 vw(4) vw(13) vw(5) rgba(0, 0, 0, 0.3);
        border-radius   : vw(10);
        font-family     : "SourceHanSansCN-Medium";
        padding         : 0 vw(24) 0;

        .title {
            padding-top: vw(100);
            display    : flex;

            .username {
                width        : vw(264);
                border-bottom: vw(1) solid;
                text-align   : center;
            }
        }

        p {
            height        : vw(68);
            font-family   : SourceHanSansCN-Medium;
            font-size     : vw(26);
            font-weight   : bolder;
            font-stretch  : normal;
            line-height   : vw(42);
            letter-spacing: 0;
            color         : #434242;
            text-indent   : 2em;

            &:first-of-type {
                margin-top: vw(66);
            }

            &:last-of-type {
                margin-top: vw(50);
            }
        }

        .saveImage {
            margin-top    : vw(60);
            display       : flex;
            flex-direction: column;
            align-items   : center;
            width         : 100%;

            .image {
                width : vw(265);
                height: vw(265);
                border: solid vw(4) #434242;

                img {
                    display: block;
                    width  : 100%;
                    height : 100%;
                }
            }

            button {
                margin-top      : vw(20);
                width           : vw(187);
                height          : vw(57);
                font-weight     : bolder;
                background-color: #ffffff;
                color           : #0075c1;
                box-shadow      : 0px 4px 4px 1px rgba(0, 0, 0, 0.39);
                border-radius   : vw(29);
            }
        }

        .other-btns {
            margin-top     : vw(66);
            display        : flex;
            justify-content: space-around;

            button {
                margin-top      : vw(20);
                width           : vw(140);
                height          : vw(40);
                font-weight     : bolder;
                background-color: #ffffff;
                color           : #0075c1;
                box-shadow      : 0px 4px 4px 1px rgba(0, 0, 0, 0.39);
                border-radius   : vw(29);
            }
        }
    }

    >a {
        position        : absolute;
        left            : 0;
        top             : 0;
        width           : 100%;
        height          : 100%;
        display         : inline-block;
        background-color: #2a2a2a;

        img {
            display   : inline-block;
            width     : 100%;
            height    : 100%;
            transform : scale(1);
            transition: all 0.5s;
        }
    }
}